<template>
  <div class="app-container">
    <el-form ref="attendForm" :model="attendForm" label-width="120px" style="width: 36%">

      <div>

        <el-form-item label="部门" required prop="departId">
          <el-select v-model="attendForm.departId" placeholder="请选择部门" @change="fetchDepartmentEmployee">
            <el-option label="皇室" value="1"/>
            <el-option label="范家" value="2"/>
            <el-option label="暗探" value="3"/>
            <el-option label="监察院" value="4"/>
          </el-select>
        </el-form-item>

        <el-form-item label="员工" required prop="employeeId">
          <el-select
            v-model="attendForm.employeeId"
            :loading="employeeLoading"
            placeholder="请选择员工"
            loading-text="正在加载数据..">
            <template v-for="item in selectedDepartmentEmployee">
              <el-option :key="item.employeeId" :label="item.name" :value="item.employeeId"/>
            </template>
          </el-select>
        </el-form-item>
        <el-form-item label="迟到" required>
          <el-input v-model="attendForm.late" type="number"/>
        </el-form-item>

        <el-form-item label="早退" required>
          <el-input v-model="attendForm.leaveEarly" type="number"/>
        </el-form-item>

        <el-form-item label="病假">
          <template>
            <el-radio
              v-model="attendForm.illAbsence"
              label="true">是
            </el-radio>
            <el-radio
              v-model="attendForm.illAbsence"
              label="false">否
            </el-radio>
          </template>
        </el-form-item>
        <el-form-item label="事假">
          <template>
            <el-radio
              v-model="attendForm.thingAbsence"
              label="true">是
            </el-radio>
            <el-radio
              v-model="attendForm.thingAbsence"
              label="false">否
            </el-radio>
          </template>
        </el-form-item>
        <el-form-item label="公休假">
          <template>
            <el-radio
              v-model="attendForm.pubHoliday"
              label="true">是
            </el-radio>
            <el-radio
              v-model="attendForm.pubHoliday"
              label="false">否
            </el-radio>
          </template>
        </el-form-item>
        <el-form-item required label="考勤日期">
          <div class="block">
            <el-date-picker
              v-model="attendForm.date"
              :picker-options="pickerOptions"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择考勤日期"/>
          </div>
        </el-form-item>

        <el-form-item>
          <el-button :loading="addLoading" type="primary" @click="submitForm('attendForm')">添加</el-button>
          <el-button type="danger" @click="resetForm">重置</el-button>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>

<script>/* eslint-disable indent */
import { isEmpty } from '../../../../utils/string'
import { getEmployeesByDepartment } from '../../../../api/employee'
import { addAttend } from '../../../../api/attend'

export default {
  data() {
    return {
      attendForm: {

        name: '',
        employeeId: '',
        departId: '',
        late: 0,
        leaveEarly: 0,
        illAbsence: 'false',
        thingAbsence: 'false',
        pubHoliday: 'false',
        date: ''
      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        }
      },
      employeeLoading: false,
      selectedDepartmentEmployee: [],
      addLoading: false

    }
  },

  methods: {
    resetForm() {
      Object.assign(this.attendForm, this.$options.data().form)
    },

    async fetchDepartmentEmployee() {
      this.attendForm.employeeId = ''
      if (this.attendForm.departId !== '') {
        this.employeeLoading = true
        const response = await getEmployeesByDepartment(this.attendForm.departId)
        if (response.success) {
          this.selectedDepartmentEmployee = response.data.data
        } else {
          this.$message.error('加载部门雇员错误')
        }
        this.employeeLoading = false
      }
    },
    submitForm(formName) {
      this.addLoading = true
      const that = this
      if ((this.attendForm.illAbsence === 'true' && this.attendForm.thingAbsence === 'true') ||
        (this.attendForm.illAbsence === 'true' && this.attendForm.pubHoliday === 'true') ||
        (this.attendForm.thingAbsence === 'true' && this.attendForm.pubHoliday === 'true')
      ) {
        this.$message.error('不能同时存在两种假期类型')
        return
      }
      if (this.attendForm.date === '') {
        this.$message.error('请选择考勤日期')
        return
      }
      this.$refs[formName].validate((valid) => {
        if (valid) {
          addAttend(that.attendForm).then(response => {
            if (response.success) {
              that.resetForm()
            }
            that.displayResult(response)
            that.addLoading = false
          })
        } else {
          return false
        }
      })
      that.addLoading = false

    },

    displayResult(response) {
      if (!response.success) {
        this.$message({
          message: '添加出错！' + response.message,
          type: 'error'
        })
        return
      }
      this.$message({
        message: '添加成功!',
        type: 'success'
      })
      this.resetForm()
    }

  }
}
</script>

<style scoped>
  .line {
    text-align: center;
  }
</style>

